<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.5.1.min.js"></script>
</head>

<body>
    <div>div</div>
    <!-- <div>
        <p class="p1">p1 
        
            <span class="s1">span1</span>
            <span class="s2">span2</span>
        </p>
    </div> -->

    <p id="p2">p2 
        <span class="s1">span</span>
    </p>
    <script>
        // 标签选择器
        // 空格是子孙元素
        // $('p>.s2').hide();
        // > 子元素

        // ~ 是兄弟元素
        // + 是下一个兄弟元素

        // 选出来的对象  和我们用document 选出来的对象的 区别
        // dom对象
        var div1=document.querySelector('div');
        console.dir(div1)
        // jquery 对象
        $('div'); // 其实是用$将dom元素进行了包装  是一个伪数组
        console.dir($('div'))

        // jquery对象不能使用dom对象的方法和属性  
        // dom对象也不可以使用jquery的方法和属性

        // div1.style.display='none'
        // $('div').style.display='none'//这种写法是错的
        // div1.hide();

        // jquery 对象 转dom
        // $('div')[0].style.display='none'

        // dom 转jquery
        $(div1).hide();
    </script>
</body>

</html>